import * as echarts from "echarts";
import henan from './henan.json'
import wl from '@/data/wl2.json'; // 导入地图数据
import hz from '@/data/hz.json'; // 导入地图数据
// import "echarts-gl"; //echarts 3D插件，有用到3d地图的需要此插件，普通图表不需要引入
import echartsGL from "echarts-gl";
import { map } from "leaflet";
export default {
  data() {
    return {
      title: "混入",
      option: {},
      option2: {
        backgroundColor: "#05224d",
        tooltip: {},
        grid: {
          top: "8%",
          left: "1%",
          right: "1%",
          bottom: "8%",
          containLabel: true,
        },
        legend: {
          itemGap: 50,
          data: ["注册总量", "最新注册量"],
          textStyle: {
            color: "#f9f9f9",
            borderColor: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#f9f9f9",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#d1e6eb",
                margin: 15,
              },
            },
            axisTick: {
              show: false,
            },
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 7,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0a3256",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "注册总量",
            type: "line",
            // smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: "#28ffb3", // 线条颜色
              },
              borderColor: "#f0f",
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                color: "#28ffb3",
              },
            },
            tooltip: {
              show: false,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,154,120,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,0,0, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: [393, 438, 485, 631, 689, 824, 987],
          },
          {
            name: "最新注册量",
            type: "bar",
            barWidth: 20,
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                // barBorderRadius: 5,
                // color: new echarts.graphic.LinearGradient(
                //     0, 0, 0, 1,
                //     [{
                //             offset: 0,
                //             color: '#14c8d4'
                //         },
                //         {
                //             offset: 1,
                //             color: '#43eec6'
                //         }
                //     ]
                // )
                color: function (params) {
                  var colorList = [
                    "#0ec1ff",
                    "#10cdff",
                    "#12daff",
                    "#15ebff",
                    "#17f8ff",
                    "#1cfffb",
                    "#1dfff1",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            data: [200, 382, 102, 267, 186, 315, 316],
          },
        ],
      },
      option3: {
        backgroundColor: "#11183c",
        grid: {
          left: "5%",
          right: "10%",
          top: "20%",
          bottom: "15%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          //   trigger: "item",
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          show: true,
          x: "center",
          y: "35",
          icon: "stack",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#1bb4f6",
          },
          data: ["已采纳", "已发布", "浏览量"],
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              color: "1bb4f6",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#397cbc",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#195384",
              },
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "信息量",
            min: 0,
            max: 1000,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#2ad1d2",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#27b4c2",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#11366e",
              },
            },
          },
          {
            type: "value",
            name: "浏览量",
            min: 0,
            max: 1000,
            axisLabel: {
              formatter: "{value} 人",
              textStyle: {
                color: "#186afe",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#186afe",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#11366e",
              },
            },
          },
        ],
        series: [
          {
            name: "已采纳",
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#0092f6",
                lineStyle: {
                  color: "#0092f6",
                  width: 1,
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(7,44,90,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,146,246,0.9)",
                    },
                  ]),
                },
              },
            },
            markPoint: {
              itemStyle: {
                normal: {
                  color: "red",
                },
              },
            },
            data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
          },
          {
            name: "已发布",
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize: 8,

            itemStyle: {
              normal: {
                color: "#00d4c7",
                lineStyle: {
                  color: "#00d4c7",
                  width: 1,
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(7,44,90,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,212,199,0.9)",
                    },
                  ]),
                },
              },
            },
            data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410],
          },
          {
            name: "浏览量",
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#aecb56",
                lineStyle: {
                  color: "#aecb56",
                  width: 1,
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(7,44,90,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(114,144,89,0.9)",
                    },
                  ]),
                },
              },
            },
            data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190],
          },
        ],
      },
      option4: {

      },
      threeOption:{

      }
    };
  },
  computed: {},
  watch: {},
  created() {
    this.setOption();
    this.setOption2();
    
  },
  mounted() {
    this.setThreeOption();
  },
  methods: {
    setOption() {
      this.option = {
        backgroundColor: "#05224d",
        tooltip: {},
        grid: {
          top: "8%",
          left: "1%",
          right: "1%",
          bottom: "8%",
          containLabel: true,
        },
        legend: {
          itemGap: 50,
          data: ["注册总量", "最新注册量"],
          textStyle: {
            color: "#f9f9f9",
            borderColor: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#f9f9f9",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#d1e6eb",
                margin: 15,
              },
            },
            axisTick: {
              show: false,
            },
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 7,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0a3256",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "注册总量",
            type: "line",
            // smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: "#28ffb3", // 线条颜色
              },
              borderColor: "#f0f",
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                color: "#28ffb3",
              },
            },
            tooltip: {
              show: false,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,154,120,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,0,0, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: [393, 438, 485, 631, 689, 824, 987],
          },
          {
            name: "最新注册量",
            type: "bar",
            barWidth: 20,
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                // barBorderRadius: 5,
                // color: new echarts.graphic.LinearGradient(
                //     0, 0, 0, 1,
                //     [{
                //             offset: 0,
                //             color: '#14c8d4'
                //         },
                //         {
                //             offset: 1,
                //             color: '#43eec6'
                //         }
                //     ]
                // )
                color: function (params) {
                  var colorList = [
                    "#0ec1ff",
                    "#10cdff",
                    "#12daff",
                    "#15ebff",
                    "#17f8ff",
                    "#1cfffb",
                    "#1dfff1",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            data: [200, 382, 102, 267, 186, 315, 316],
          },
        ],
      };
    },
    setOption2() {
      var img2 =
        "image://";
      // var uploadedDataURL = "./henan.json";
      // var geoCoordMap = {
      //   城东街道: [121.40187765784061, 28.404361921934353],
      //   温峤镇: [121.27409949021475, 28.380497499487557],
      //   坞根镇: [121.24250954841321, 28.316599919460497],
      //   城南镇: [121.38377796366774, 28.305742248204574],
      //   大溪镇: [121.25536178753912, 28.472940294759066],
      //   新河镇: [121.45514829572889, 28.455738835250838],
      //   松门镇: [121.60920117969519, 28.357790258026718],
      //   泽国镇: [121.35757912670826, 28.487567510721888],
      //   滨海镇: [121.54031409718246, 28.470554150818185],
      //   石塘镇: [121.60406856248167, 28.27766905573108],
      //   箬横镇: [121.51414326149278, 28.38162138561351],
      //   城北街道: [121.38393077778395, 28.447512176735],
      //   城西街道: [121.34105411031385, 28.390506762198545],
      //   太平街道: [121.35833423085276, 28.3615994446682],
      //   横峰街道: [121.34324939893065, 28.4323294342161],
      //   石桥头镇: [121.44955108713704, 28.350963221503253],
      //   东部新区: [121.59771, 28.433072],
      // };
      // var customerBatteryCityData = [
      //   { name: '城东街道', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '温峤镇', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '坞根镇', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '城南镇"', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '大溪镇', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '新河镇', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '松门镇', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '泽国镇', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '滨海镇', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '石塘镇', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '箬横镇', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '城北街道', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '城西街道', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '太平街道"', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '横峰街道', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '石桥头镇', value: 1, fdl: '99%', tds: 1, fds: 101 },
      //   { name: '东部新区', value: 1, fdl: '99%', tds: 1, fds: 101 },
      // ];
      var geoCoordMap = {
        城东街道: [121.40187765784061, 28.404361921934353],
        温峤镇: [121.27409949021475, 28.380497499487557],
        南阳市: [112.542841901, 33.0114195691],
        周口市: [114.654101942, 33.6237408181],
        商丘市: [115.641885688, 34.4385886402],
        安阳市: [114.351806508, 36.1102667222],
        平顶山市: [113.300848978, 33.7453014565],
        开封市: [114.351642118, 34.8018541758],
        新乡市: [113.912690161, 35.3072575577],
        洛阳市: [112.147524769, 34.2873678177],
        漯河市: [114.0460614, 33.5762786885],
        濮阳市: [115.026627441, 35.7532978882],
        焦作市: [113.211835885, 35.234607555],
        许昌市: [113.83531246, 34.0267395887],
        郑州市: [113.64964385, 34.7566100641],
        驻马店市: [114.049153547, 32.9831581541],
        鹤壁市: [114.297769838, 35.7554258742],
      };
      var customerBatteryCityData = [
        { name: "城东街道", value: 0.1, fdl: "99%", tds: 1, fds: 101 },
        { name: "温峤镇", value: .2, fdl: "99%", tds: 1, fds: 101 },
        { name: "南阳市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "周口市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "商丘市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "安阳市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "平顶山市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "开封市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "新乡市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "洛阳市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "漯河市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "濮阳市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "焦作市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "许昌市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "郑州市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "驻马店市", value: 1, fdl: "99%", tds: 1, fds: 101 },
        { name: "鹤壁市", value: 0.5, fdl: "99%", tds: 1, fds: 101 },
      ];
      function lookVideoGo() {
        alert("1");
      }
      // $.getJSON(uploadedDataURL, function (geoJson) {
      echarts.registerMap("henan", wl);
      let option = {
        backgroundColor: "#11183c",

        tooltip: {
          trigger: "item",
          triggerOn: "click",
          showDelay: 0, //浮层显示的延迟
          transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
          enterable: true,
          formatter: function (item) {
            if (item.componentSubType == "map") {
              // 详情
              return;
            }
            var tipHtml = "";
            tipHtml =
              '<div style="font-size: 16px;height: 150px;line-height: 30px;background:#000259;opacity: 0.75;border-radius: 3px;color:#fff">' +
              item.data[2].name +
              "&nbsp;&nbsp;&nbsp;<br />" +
              "合格率&nbsp;&nbsp;" +
              item.data[2].fdl +
              "&nbsp;&nbsp;<br/>" +
              "不合格数&nbsp;&nbsp;" +
              item.data[2].tds +
              "&nbsp;&nbsp;<br/>" +
              "合格数&nbsp;&nbsp;" +
              item.data[2].fds +
              "&nbsp;&nbsp;" +
              '</span><button onclick="lookVideoGo()">查看</button></div>';
            return tipHtml;
          },
          // position: [10, 10],
          backgroundColor: "#fff",
        },
        geo: [
          {
            map: "henan",
            aspectScale: 0.9,
            roam: false, // 是否允许缩放
            zoom: 1.2, // 默认显示级别
            layoutSize: "95%",
            layoutCenter: ["55%", "50%"],
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 400,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(37,108,190,0.3)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(15,169,195,0.3)", // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
                borderColor: "#fff",
                borderWidth: 0.5,
              },

              emphasis: {
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(37,108,190,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(15,169,195,1)", // 50% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                  // borderColor: "#fff",
                  // borderWidth: 1,
                },
              },
            },
            emphasis: {
              itemStyle: {
                areaColor: "#0160AD",
              },
              label: {
                show: 0,
                color: "transparent",
              },
            },
            zlevel: 3,
          },
          {
            map: "henan",
            aspectScale: 0.9,
            roam: false, // 是否允许缩放
            zoom: 1.2, // 默认显示级别
            layoutSize: "95%",
            layoutCenter: ["55%", "49%"],
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 400,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(37,108,190,0.3)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(15,169,195,0.3)", // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
                //  borderColor: "#fff",
                //  borderWidth: .5,
              },

              emphasis: {
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(37,108,190,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(15,169,195,1)", // 50% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            emphasis: {
              itemStyle: {
                areaColor: "#0160AD",
              },
              label: {
                show: 0,
                color: "transparent",
              },
            },
            zlevel: 4,
          },

          {
            map: "henan",
            aspectScale: 0.9,
            roam: false, // 是否允许缩放
            zoom: 1.2, // 默认显示级别
            layoutSize: "95%",
            layoutCenter: ["55%", "52%"],
            itemStyle: {
              // normal: {
              //   //  borderColor: "rgba(192,245,249,.6)",
              //   //  borderWidth: 2,
              //   shadowColor: "#2C99F6",
              //   shadowOffsetY: 0,
              //   shadowBlur: 120,
              //   areaColor: "rgba(29,85,139,.2)",

              // },
              normal: {
                borderWidth: 5,
                // borderColor: "rgba(11, 43, 97,0.8)",
                borderColor: "rgba(5,9,57,0.8)",
                shadowColor: "rgba(29, 111, 165,0.8)",
                shadowOffsetY: 15,
                shadowBlur: 10,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
            zlevel: 2,
            silent: true,
          },
          //  {
          //    map: "henan",
          //    aspectScale: 0.9,
          //    roam: false, // 是否允许缩放
          //    zoom: 1.2, // 默认显示级别
          //    layoutSize: "95%",
          //    layoutCenter: ["55%", "52%"],
          //    itemStyle: {
          //      areaColor: "rgba(0,27,95,0.4)",
          //      borderColor: "#004db5",
          //      borderWidth: 1,
          //    },
          //    zlevel: 1,
          //    silent: true,
          //  },
        ],
        series: [
          // map
          {
            geoIndex: 0,

            showLegendSymbol: true,
            type: "map",
            map: "henan",
            roam: true,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },

            itemStyle: {
              normal: {
                borderColor: "#2ab8ff",
                borderWidth: 1.5,
                areaColor: "#12235c",
              },
              emphasis: {
                areaColor: "#2AB8FF",
                borderWidth: 0,
                color: "red",
              },
            },
            map: "henan", // 使用
            data: customerBatteryCityData,
            // data: this.difficultData //热力图数据   不同区域 不同的底色
          },
          //柱状体的主干
          {
            type: "lines",
            zlevel: 5,
            effect: {
              show: false,
              symbolSize: 5, // 图标大小
            },
            lineStyle: {
              width: 6, // 尾迹线条宽度
              color: "rgb(22,255,255, .6)",
              opacity: 1, // 尾迹线条透明度
              curveness: 0, // 尾迹线条曲直度
            },
            label: {
              show: 0,
              position: "end",
              formatter: "245",
            },
            silent: true,
            data: lineData(),
          },
          // 柱状体的顶部
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 5,

            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  var name = params.data[2].name;
                  var value = params.data[2].fdl;
                  // var text = `{tline|${name}}:{fline|${value}}`
                  var text = `{tline|合格率}:{fline|${value}}`;
                  return text;
                },
                color: "#fff",
                rich: {
                  fline: {
                    // padding: [0, 25],
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 400,
                  },
                  tline: {
                    // padding: [0, 27],
                    color: "#ABF8FF",
                    fontSize: 12,
                  },
                },
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              color: "#00FFF6",
              opacity: 1,
            },
            symbol: img2,
            symbolSize: [100, 50],
            symbolOffset: [0, -20],
            z: 999,
            data: scatterData(),
          },
          // 柱状体的底部
          {
            geoIndex: 0,
            zlevel: 4,
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              scale: 10,
              brushType: "stroke",
            },
            showEffectOn: "render",
            itemStyle: {
              normal: {
                color: "#00FFFF",
              },
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "bottom",
                color: "#fff",
                fontSize: 12,
                distance: 10,
                show: true,
              },
            },
            symbol: "circle",
            symbolSize: [10, 5],
            itemStyle: {
              // color: '#F7AF21',
              color: "rgb(22,255,255, 1)",
              opacity: 1,
            },
            data: scatterData2(),
          },
          // 底部外框
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 4,
            label: {
              show: false,
            },
            symbol: "circle",
            symbolSize: [1, 1],
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(22,255,255, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 0.75,
                    color: "rgb(22,255,255, 0)", // 100% 处的颜色
                  },
                  {
                    offset: 0.751,
                    color: "rgb(22,255,255, 1)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgb(22,255,255, 1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              opacity: 1,
            },
            silent: true,
            data: scatterData2(),
          },
        ],
      };

      // myChart.setOption(option);
      this.option4 = option;
      // });

      // 动态计算柱形图的高度（定一个max）
      function lineMaxHeight() {
        const maxValue = Math.max(...customerBatteryCityData.map((item) => item.value));
        return 0.3;
      }
      // 柱状体的主干
      function lineData() {
        return customerBatteryCityData.map((item) => {
          return {
            coords: [
              geoCoordMap[item.name],
              [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()],
            ],
          };
        });
      }
      // 柱状体的顶部
      function scatterData() {
        return customerBatteryCityData.map((item) => {
          return [
            geoCoordMap[item.name][0],
            geoCoordMap[item.name][1] + item.value * lineMaxHeight(),
            item,
          ];
        });
      }
      // 柱状体的底部
      function scatterData2() {
        return customerBatteryCityData.map((item) => {
          return {
            name: item.name,
            value: geoCoordMap[item.name],
          };
        });
      }
    },
   setThreeOption() {
     var geoCoordMap = {
       三门峡市: [111.181262093, 34.7833199411],
       信阳市: [114.085490993, 32.1285823075],
       南阳市: [112.542841901, 33.0114195691],
       周口市: [114.654101942, 33.6237408181],
       商丘市: [115.641885688, 34.4385886402],
       安阳市: [114.351806508, 36.1102667222],
       平顶山市: [113.300848978, 33.7453014565],
       开封市: [114.351642118, 34.8018541758],
       新乡市: [113.912690161, 35.3072575577],
       洛阳市: [112.147524769, 34.2873678177],
       漯河市: [114.0460614, 33.5762786885],
       濮阳市: [115.026627441, 35.7532978882],
       焦作市: [113.211835885, 35.234607555],
       许昌市: [113.83531246, 34.0267395887],
       郑州市: [113.64964385, 34.7566100641],
       驻马店市: [114.049153547, 32.9831581541],
       鹤壁市: [114.297769838, 35.7554258742],
     };
     var customerBatteryCityData = [
       { name: "三门峡市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "信阳市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "南阳市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "周口市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "商丘市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "安阳市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "平顶山市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "开封市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "新乡市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "洛阳市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "漯河市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "濮阳市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "焦作市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "许昌市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "郑州市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "驻马店市", value: 1, fdl: "99%", tds: 1, fds: 101 },
       { name: "鹤壁市", value: 1, fdl: "99%", tds: 1, fds: 101 },
     ];
     var processedData = customerBatteryCityData.map((city) => ({
       name: city.name,
       value: [
         geoCoordMap[city.name][0], // 经度
         geoCoordMap[city.name][1], // 纬度
         city.fds, // 柱状图的高度，这里使用fds作为高度
       ],
     }));
     let option = {
       title: {
         text: "3D地图",
       },
       toolbox: {
         show: true,
         feature: {
           restore: {},
           saveAsImage: {},
         },
       },
       visualMap: {
         max: 200,
         inRange: {
           color: [
             "#313695",
             "#4575b4",
             "#74add1",
             "#abd9e9",
             "#e0f3f8",
             "#ffffbf",
             "#fee090",
             "#fdae61",
             "#f46d43",
             "#d73027",
             "#a50026",
           ],
         },
         calculable: true,
         realtime: true,
         show: true,
         piecewise: true,
         orient: "vertical",
         left: "right",
         bottom: "bottom",
       },
       geo3D: {
         map: "henan", // 使用河南省的地图
         roam: true,
         viewControl: {
           distance: 110,
           rotateSensitivity: [1, 1],
         },
         label: {
           show: true,
           textStyle: {
             color: "white",
             fontSize: 15,
           },
         },
         itemStyle: {
           color: "#2B5890",
           borderWidth: 1,
           borderColor: "#fff",
           opacity: 0.8,
         },
         emphasis: {
           label: {
             show: true,
             textStyle: {
               color: "#fff",
             },
           },
           itemStyle: {
             color: "#0489d6",
           },
         },
         regions: processedData.map((city) => ({
           name: city.name,
           itemStyle: {
             color: "#2B5890",
           },
           emphasis: {
             itemStyle: {
               color: "#0489d6",
             },
           },
         })),
       },
       series: [
         {
           type: "bar3D",
           coordinateSystem: "geo3D",
           data: processedData,
           renderItem: function (params, api) {
             return {
               position: api.coord([
                 params.value[0], // 经度
                 params.value[1], // 纬度
                 params.value[2] / 2, // 高度的一半
               ]),
               shape: "cylinder",
               silent: false,
               itemStyle: {
                 color: "rgb(0, 180, 255)",
               },
               dimensions: [
                 api.size([20, 20, params.value[2]]), // 直径 * 2, 高度
               ],
             };
           },
         },
         // 线 和 点
        //  {
        //    type: "lines3D",
        //    coordinateSystem: "geo3D",
        //    zlevel: 1, //设置这个才会有轨迹线的小尾巴
        //    polyline: false,
        //    effect: {
        //      show: true,
        //      period: 10,
        //      trailLength: 0.1,
        //      trailColor: "#17eafe",
        //      color: "#fff", //流动点颜色
        //      symbol: "arrow",
        //      symbolSize: 6,
        //    },
        //    lineStyle: {
        //      normal: {
        //        color: "#fff", //线条颜色
        //        width: 1,
        //        curveness: 0.5,
        //        shadowColor: "#fff",
        //      },
        //    },
        //    blendMode: "lighter",
        //    data: lineData,
        //  },
       ],
     };

     //  let option = {
     //    title: {
     //      text: "3D地图",
     //    },

     //    series: [
     //      {
     //        type: "map3D",
     //        name: "hn",
     //        selectedMode: "single", //地图高亮单选
     //        regionHeight: 5, //地图高度
     //        map: "zhejiang",
     //        viewControl: {
     //          distance: 110, //地图视角 控制初始大小
     //          rotateSensitivity: [1, 1],
     //        },
     //        label: {
     //          show: true, //是否显示市
     //          textStyle: {
     //            color: "white", //文字颜色
     //            fontSize: 15, //文字大小
     //          },
     //        },
     //        itemStyle: {
     //          color: "#2B5890", //地图颜色
     //          borderWidth: 1, //分界线wdith
     //          borderColor: "#fff", //分界线颜色
     //          opacity: 0.8, //地图透明度
     //        },
     //        emphasis: {
     //          label: {
     //            show: true, //是否显示高亮
     //            textStyle: {
     //              color: "#fff", //高亮文字颜色
     //            },
     //          },
     //          itemStyle: {
     //            color: "#0489d6", //地图高亮颜色
     //          },
     //        },
     //        data: [
     //        ],
     //      },
     //      //柱状体的主干
     //    ],
     //  };
     //  echarts.registerMap("zhejiang", henan);
     echarts.registerMap("henan", henan); // 假设你已经有了一个名为henan的地图定义
     // myChart.setOption(option);
     this.threeOption = option;
     // 动态计算柱形图的高度（定一个max）
     function lineMaxHeight() {
       const maxValue = Math.max(...customerBatteryCityData.map((item) => item.value));
       return 0.3;
     }
     // 柱状体的主干
     function lineData() {
       return customerBatteryCityData.map((item) => {
         return {
           coords: [
             geoCoordMap[item.name],
             [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()],
           ],
         };
       });
     }
     // 柱状体的顶部
     function scatterData() {
       return customerBatteryCityData.map((item) => {
         return [
           geoCoordMap[item.name][0],
           geoCoordMap[item.name][1] + item.value * lineMaxHeight(),
           item,
         ];
       });
     }
     // 柱状体的底部
     function scatterData2() {
       return customerBatteryCityData.map((item) => {
         return {
           name: item.name,
           value: geoCoordMap[item.name],
         };
       });
     }
   },
  },
};
